<template>
    <div :class="{ 'header-wrap': screenWidth > 1000, 'h5h': screenWidth <= 1000 }"
        :style="{ backgroundColor: styleColor == 0 ? '' : '#fff', boxShadow: styleColor == 0 ? '' : '0px 0.3125vw 1.04167vw 0px rgba(0, 0, 0, 0.06)' }">
        <div class="wrap2" v-if="screenWidth > 1000">
            <div class="logo" @click="goPage('/index', 'zh')"><img v-if="!styleColor" src="@/assets/img/LOGO3.png"
                    alt=""><img v-else src="@/assets/img/LOGO4.png" alt="">
                <div class="title" :style="{ color: styleColor == 0 ? '' : '#666' }"> {{ $t('h.web') }}</div>
            </div>
            <div class="nav-rigth">
                <div class="nav-wrap">
                    <div @click="goPage('/lang-index')" :style="{ color: styleColor == 0 ? '#fff' : '#333' }"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/lang-index', ruSize: $i18n.locale == 'ru' }">
                        <span class="header-title">{{ $t('h.home') }}</span>
                    </div>
                    <div @click="goPage('/lang-spot')" :style="{ color: styleColor == 0 ? '#fff' : '#333' }"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/lang-spot', ruSize: $i18n.locale == 'ru' }">
                        <span class="header-title">{{ $t('h.Attractions') }}</span>
                    </div>
                    <div @click="goPage('/lang-metro')" :style="{ color: styleColor == 0 ? '#fff' : '#333' }"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/lang-metro', ruSize: $i18n.locale == 'ru' }">
                        <span class="header-title">{{ $t('h.TrInfo') }}</span>
                    </div>
                    <div @click="goPage('/lang-consultation')" :style="{ color: styleColor == 0 ? '#fff' : '#333' }"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/lang-consultation', ruSize: $i18n.locale == 'ru' }">
                        <span class="header-title">{{ $t('h.TraveTnquiry') }}</span>
                    </div>
                    <div @click="goPage('/lang-about')" :style="{ color: styleColor == 0 ? '#fff' : '#333' }"
                        :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/lang-about', ruSize: $i18n.locale == 'ru' }">
                        <span class="header-title">{{ $t('h.Cultural') }}</span>
                    </div>
                </div>
                <div class="btn-wrap" :style="{ color: styleColor == 0 ? '#fff' : '#333' }">
                    <div class="languageSelection">
                        <div class="language">{{ $t('h.lang') }}</div>
                        <div :style="{ backgroundColor: styleColor == 0 ? '#fff' : '#DCDFE6' }"
                            class="el-divider el-divider--vertical"><!----></div><i class="l-iconfont down">&#xe68a;</i>
                    </div>
                    <div class="select-box">
                        <p @click="goPage('/index', 'zh')"> 中文简体 </p>
                        <p @click="goPage('/lang-index', 'en')"> English </p>
                        <p @click="goPage('/lang-index', 'ja')"> 日本語 </p>
                        <p @click="goPage('/lang-index', 'ko')"> 한국어 </p>
                        <p @click="goPage('/lang-index', 'ru')"> русская версия </p>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="screenWidth <= 1000" @click="goPage('/index')" class="logo"><img src="@/assets/img/LOGO2.png" alt=""></div>
        <div @click="showMenu = true" v-if="screenWidth <= 1000" class="menu"><img src="@/assets/img/menu.png" alt="">
        </div>
        <div class="h5h-mask" v-if="screenWidth <= 1000 && showMenu">
            <div @click="showMenu = false" class="close"><i class="l-iconfont">&#xe6ed;</i></div>
            <div class="mask-logo"><img src="@/assets/img/LOGO2.png" alt="">
            </div>
            <div class="nav-wrap">
                <div @click="goPage('/lang-index')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/lang-index', ruSize: $i18n.locale == 'ru' }">
                    <span class="header-title">{{ $t('h.home') }}</span>
                </div>
                <div @click="goPage('/lang-spot')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/lang-spot', ruSize: $i18n.locale == 'ru' }">
                    <span class="header-title">{{ $t('h.Attractions') }}</span>
                </div>
                <div @click="goPage('/lang-metro')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/lang-metro', ruSize: $i18n.locale == 'ru' }">
                    <span class="header-title">{{ $t('h.TrInfo') }}</span>
                </div>
                <div @click="goPage('/lang-consultation')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == 'lang-consultation', ruSize: $i18n.locale == 'ru' }">
                    <span class="header-title">{{ $t('h.TraveTnquiry') }}</span>
                </div>
                <div @click="goPage('/lang-about')"
                    :class="{ 'nav-list': true, 'hover-show': true, 'active': path == '/lang-about', ruSize: $i18n.locale == 'ru' }">
                    <span class="header-title">{{ $t('h.Cultural') }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LangHeaderS', // 组件名称
    data() {
        return {
            showMenu: false,
        };
    },
    props: {
        styleColor: {
            type: Number,
            default: 0
        }
    },
    created() {
        if(sessionStorage.getItem('lang')){
            this.$i18n.locale = sessionStorage.getItem('lang')
        }else{
            this.$i18n.locale = 'en'
            sessionStorage.setItem('lang', 'en')
        }
       
    },
    methods: {
        goPage(url, lang) {
            if (lang && this.$route.path ==url && lang!= this.$i18n.locale) {
                console.log(lang);
                sessionStorage.setItem('lang', lang)
                this.$i18n.locale = sessionStorage.getItem('lang'); 
                this.$router.go(0);
                return
            }
            if(lang && this.$route.path !=url && lang!= this.$i18n.locale){
                sessionStorage.setItem('lang', lang)
                this.$i18n.locale = sessionStorage.getItem('lang'); 
                this.$router.push(url)
                return
            }
            if (this.$route.path == url) {
                return
            } else {
                this.$router.push(url)
            }

        }
    },
    computed: {
        screenWidth() {
            return this.$store.getters.screenWidth
        },
        path() {
            return this.$route.path; // 获取当前路径

        }
    },
    watch: {
        // 监听器
    },

};
</script>

<style scoped>
@import "@/assets/css/head.css";

/* 样式 */
.header-wrap .nav-rigth .nav-wrap .nav-list.ruSize {
    font-size: 0.83333vw;
}

.header-wrap .logo {
    height: 2.08333vw;
    cursor: pointer;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

.header-wrap .logo .title {
    margin-left: 0.52083vw;
    font-family: GeometricSlab703BT-Medium;
    font-size: 1.04167vw;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.04167vw;
    letter-spacing: 0px;
    color: #ffffff;
}
.el-divider--vertical{
    margin: 0 0.41667vw
}
</style>